import React, { useEffect, useState } from 'react';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { getTourlist } from '@/api/getToutist';
import './style/tour.css';
import { addTable } from '@/pages/hoc/table';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const columns: ColumnsType<DataType> = [
  {
    title: 'ID',
    dataIndex: 'vid',
    key: 'vid',
  },
  {
    title: '游客id',
    dataIndex: 'visitor_id',
    key: 'visitor_id',
  },
  {
    title: '游客名称',
    dataIndex: 'visitor_name',
    key: 'visitor_name',
  },
  {
    title: '游客头像',
    dataIndex: 'visitor_avatar',
    key: 'visitor_avatar',
    render: (text) => {
      console.log(text);
      return (
        <img
          className="ant-table-cell-img"
          src={`http://fangadmin.shbwyz.com${text}`}
          alt=""
        />
      );
    },
  },
  {
    title: '在线状态',
    dataIndex: 'online_status',
    key: 'online_status',
    render: (text) => {
      console.log(text);

      return (
        <>
          {text === 1 ? (
            <Tag color="#87d068">上线</Tag>
          ) : (
            <Tag color="#f50">离线</Tag>
          )}
        </>
      );
    },
  },
  {
    title: 'IP',
    dataIndex: 'visitor_ip',
    key: 'visitor_ip',
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time',
  },
];

const App = (props: any) => {
  console.log(props);

  let { data, count } = props;
  return (
    <Table
      pagination={{
        total: count,
        pageSize: 20,
        showQuickJumper: true,
      }}
      columns={columns}
      dataSource={data}
    ></Table>
  );
};

export default addTable(getTourlist)(App);
